<template>
  <el-dialog
    title="数据导入"
    :visible.sync="dialogVisible"
    :append-to-body="true"
    width="600px"
    @close="close"
    :close-on-click-modal="false"

    center
  >
    <el-upload
      class="upload-dialog"
      drag
      action="#"
      :show-file-list="true"
      :on-change="onChange"
      :http-request="uploadImg"
      accept=".xlsx,.xls"
      :auto-upload="false"
      :multiple="false"
      ref="upload"
    >
      <div class="el-upload__text">
        <span class="plus">+</span> 将文件拖到此处，或<em>点击上传</em>
      </div>
    </el-upload>
    <span slot="footer" class="dialog-footer" >
      <el-button @click="close">取 消</el-button>
      <el-button @click="save" type="primary" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  name: 'uploadDialog',
  data() {
    return {
      dialogVisible: false,
      loading: false,
      otherData: this.params,
    };
  },
  props: {
    uploadUrl: String,
    params: Object,
  },
  watch: {
    params(val) {
      this.otherData = val;
    },
  },
  computed: {
    loginInfo() {
      return this.$store.getters.getLoginInfo;
    },
  },
  methods: {
    close() {
      this.$refs.upload.clearFiles();
      this.dialogVisible = false;
    },
    show(options) {
      this.dialogVisible = true;
    },
    save() {
      this.$refs.upload.submit();
    },
    onChange(file, fileList) {
      var pattern = /.*(.xls|.xlsx)$/;
      if (!pattern.test(file.name)) {
        this.$message.error('上传只支持xlsx、xls的EXCLE文档!');
        fileList.pop();
      } else  if (fileList.length > 1) {
        fileList.splice(0, 1)
      }
    },
    uploadImg(f) {
      this.loading = true;
      const file = f.file;
      const form = new FormData();
      form.append('file', file);

      if (this.otherData) {
        for (let k in this.otherData) {
          form.append(k, this.otherData[k]);
        }
      }

      this.$axiosInstance({
        method: 'post',
        url: this.uploadUrl,
        data: form,
        // processData: false,
        // contentType: false,
        // dataType: 'json',
        // async: false,
        timeout: 3 * 60 * 1000,
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress: progressEvent => {
          let persent = (progressEvent.loaded / progressEvent.total * 100 | 0)		// 上传进度百分比
          console.log(persent)
        },

      })
        .then(({ data }) => {
          if (data && data.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success',
              duration: 600,
            });
            this.close();
            this.$emit('uploaded', data);
          } else {
            this.$message({
              message: '上传失败',
              type: 'warning'
            });
          }
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
  },
};
</script>
<style lang="less" scoped>
.upload-dialog {
  width: 100%;
  /deep/.el-icon-document {
    background: url(~@/assets/excel.png) no-repeat;
    width: 16px;
    background-size: contain;
    height: 18px;
    vertical-align: middle;
    &:before {
      content: "";
      background: red;
    }
  }
  /deep/.el-upload {
    width: 100%;
    .el-upload-dragger {
      width: 100%;
      height: auto;
      padding: 20px;
    }
  }
  .plus {
    vertical-align: middle;
    font-family: "Arial Negreta", "Arial Normal", "Arial", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 48px;
  }
}
</style>
